react-i18next NPM Package — Translation Component

If we want to add localization to a React app, we can use the react-i18next NPM package to do it.

In this article, we’ll look at how to use the Translation component to render our translations.

Translation (render prop)

The Translation component lets us pass in a function as the render prop to render the translations.

For example, we can write:

import React from "react";
import i18n from "i18next";
import { initReactI18next, Translation } from "react-i18next";

const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",
  keySeparator: false,
  interpolation: {
    escapeValue: false
  }
});

export default function App() {
  return (
    <div className="App">
      <Translation>
        {(t, { i18n }) => <p>{t("Welcome to React")}</p>}
      </Translation>
    </div>
  );
}

to render the translation.

We also have access to the i18n object to let us do things like changing the language:

import React from "react";
import i18n from "i18next";
import { initReactI18next, Translation } from "react-i18next";

const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  },
  fr: {
    translation: {
      "Welcome to React": "Bienvenue dans React et react-i18next"
    }
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",
  keySeparator: false,
  interpolation: {
    escapeValue: false
  }
});

export default function App() {
  return (
    <div className="App">
      <Translation>
        {(t, { i18n }) => (
          <p>{i18n.changeLanguage("fr") && t("Welcome to React")}</p>
        )}
      </Translation>
    </div>
  );
}

We change the language on the fly and also render the translation afterward.

Loading Namespaces

We can load namespaces with the ns prop.

For example, we can write:

import React from "react";
import i18n from "i18next";
import { initReactI18next, Translation } from "react-i18next";

const resources = {
  en: {
    ns1: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",
  keySeparator: false,
  interpolation: {
    escapeValue: false
  }
});

export default function App() {
  return (
    <div className="App">
      <Translation ns="ns1">
        {(t) => <p>{t("Welcome to React")}</p>}
      </Translation>
    </div>
  );
}

We have the ns1 namespace.

And we set the ns prop to 'ns1' so that we can load the translations from there.

We can also pass in an array as the value of ns :

import React from "react";
import i18n from "i18next";
import { initReactI18next, Translation } from "react-i18next";

const resources = {
  en: {
    ns1: {
      "Welcome to React": "Welcome to React and react-i18next"
    },
    ns2: {
      Hello: "Hello World"
    }
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",
  keySeparator: false,
  interpolation: {
    escapeValue: false
  }
});

export default function App() {
  return (
    <div className="App">
      <Translation ns={["ns1", "ns2"]}>
        {(t) => <p>{t("ns2:Hello")}</p>}
      </Translation>
    </div>
  );
}

We load 2 namespaces, and we add the namespace name before the translation key so that the translation will be found.

For example, we can write:

import React from "react";
import i18n from "i18next";
import { initReactI18next, Translation } from "react-i18next";

const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  }
};

i18n.use(initReactI18next).init({
  resources,
  lng: "en",
  keySeparator: false,
  interpolation: {
    escapeValue: false
  }
});

export default function App() {
  return (
    <div className="App">
      <Translation i18n={i18n}>
        {(t) => <p>{t("Welcome to React")}</p>}
      </Translation>
    </div>
  );
}

We set the i18n prop to the i18n instance we want.

Conclusion

We can use the Translation component from the react-i18next NPM package to load the translations.